<template>
  <div class="shell">
    <div class="box">
      <!-- 回退标识 -->
      <div class="huitui" @click="back()">
        <span class="iconfont zuojiantou"></span>
      </div>

      <!-- 播放窗口autoplay muted -->
      <video class="video" controls  loop preload="none" poster="videotest/yujiazai.webp" ref="video" id="playVideos">
        <source  :src="video.src" type="video/mp4" />
      </video>
      
    </div>
    <div>
      路由传值验证--id==第--{{video.id}}--个视频
    </div>

    <div class="bf2">
      <ul class="dan">
        <li class="sp">视频</li>
        <li class="tl">讨论&nbsp;<span>770</span></li>
        <li class="dm">
          <input class="intest" type="text" placeholder="点我发弹幕" /><span
            >&nbsp;&nbsp;弹</span
          >
        </li>
      </ul>

      <!-- 追加 -->
      <div class="zaizui">
        <div class="zaizui1">
          <h4>{{ video.name }}</h4>
          <p><span>独播</span><i>🎈3559</i><b>短片·简介&nbsp;></b></p>
        </div>
        <p class="zaizui2">+在追</p>
      </div>

      <!-- 点赞、分享、收藏 -->
      <ul class="xihuan">
        <li>
          <span class="iconfont public-dianzan" :class="fcolor" @click="addStar()"></span>
          <p>{{ num }}</p>
        </li>
        <li>
          <span class="iconfont public-pinglun"></span>
          <p>17</p>
        </li>
        <li>
          <span class="iconfont public-shoucang" :class="scolor" @click="addCollection()"></span>
          <p>{{ snum }}</p>
        </li>
        <li>
          <span class="iconfont home-download"></span>
          <p>下载</p>
        </li>
        <li>
          <van-cell
            span
            class="iconfont public-zhuanfa"
            @click="showShare = true" />
          <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
          <p style="margin-left: -0.2rem; margin-top: 0rem">53</p>
        </li>
      </ul>

      <!-- 下方确认按钮 -->
      <!-- <input type="button" value="半年卡64元 原价108再赢时长" class="input" /> -->
      <van-cell is-link @click="showPopup">
        <input type="button" value="半年卡64元 原价108再赢时长" class="input" />
      </van-cell>
      <van-popup
        v-model="show"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '70%' }"
      >
        <p class="nian">年卡5折 赢100倍会员时长</p>
        <img src="../../../assets/img/yl-img/bf/tanchu.jpg" class="img1" />
        <img src="../../../assets/img/yl-img/bf/tanchu1.jpg" class="img2" />
      </van-popup>
      <HomeHotList></HomeHotList>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import HomeHotList from "../components/HomeHotList";
// import axios from "axios";
export default {
  name: "DetailsVideo",
  data() {
    return {
      el: ".fcolor",
      fcolor: "fcolor",
      scolor: "scolor",

      videoinfo: {},
      videoname: "",
      videoid: 0,
      img: "",
      text: "",
      num: "23",
      snum:'517',
      active: 2,
      show: false,
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },

  components: {
    HomeHotList,
  },
  methods: {
    back() {
      this.$router.back();
    },
    


    // 添加收藏功能
    addCollection() {
      this.snum++;
    console.log(this.$route.query.video) 
      if (this.scolor) {
        this.scolor = "";
        this.snum--;
      } else {
        this.scolor = "scolor";
        this.snum++;
      }
    },

    // 点赞============================点赞============================点赞============================点赞============================点赞============================

    addStar() {
      // 每点击一次加一

      this.num++;
      // 改变图标颜色

      if (this.fcolor) {
        this.fcolor = "";
        this.num--;
      } else {
        this.fcolor = "fcolor";
        this.num++;
      }

      //连接接口传数据给后端保存

      //

      //发送请求，

      // getdata("/addStar/2", { id: 2, up: this.num }).then((ok) => {
      //   console.log("ok", ok);
      // });
    },

    // 点赞============================点赞============================点赞============================点赞============================点赞============================

    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    showPopup() {
      this.show = true;
    },
  },

 created() {
    this.$store.dispatch("LINK_GUESS_DATA","/home/guess")
  },
   computed:{
      detaildata(){
        return this.$store.state.GuessM.guess
      },

      video(){
        return this.$route.query.video
    }
   }
};
</script>

<style scoped>
@import url("../../../assets/iconfont/iconfont.css");

.fcolor {
  color: red;
}

.shell {
  padding-bottom: 0.58rem;
}

.box {
  position: relative;
}
.huitui {
  height: 0.35rem;
  width: 0.35rem;
  border-radius: 50%;
  /* background-color: rgb(92, 92, 92); */
  position: absolute;
  padding-left: 0.1rem;
  z-index: 10;
}
.zuojiantou {
  line-height: 0.35rem;
  color: #fff;
}
.video {
  width: 100%;
}

p {
  margin-left: 0;
}
.dan {
  display: flex;
  width: 3.84rem;
  height: 0.4rem;
  margin-left: 0.15rem;
  white-space: nowrap;
  border-bottom: 0.01rem solid rgb(226, 226, 226);
  margin-bottom: 0.15rem;
}
.dan li {
  line-height: 0.4rem;
}
.dan li input {
  width: 1.1rem;
  height: 0.32rem;
  border-radius: 0.4rem;
  background-color: #f4f4f4;
  border: 0;
  font-size: 0.1rem;
}
.tl {
  margin-left: 0.28rem;
  color: #767676;
}
.tl span {
  color: #e779c3;
  font-size: 0.1rem;
}
.dm {
  margin-left: 1.44rem;
  position: relative;
}
.dm span {
  position: absolute;
  top: 0.02rem;
  right: 0.01rem;
  display: inline-block;
  width: 0.35rem;
  height: 0.37rem;
  background-color: #feffff;
  /* text-align: center; */
  border-radius: 0 0.4rem 0.4rem 0;
}

.van-cell {
  margin-top: -0.1rem;
  /* border-radius: 0.1rem; */
}
.van-icon-arrow {
  display: none;
  /* border-radius:0.1rem ; */
}
.nian {
  width: 100%;
  height: 0.47rem;
  margin-left: 0.17rem;
  font-size: 0.18rem;
  margin-top: 0.15rem;
  font-weight: bold;
}
.img1 {
  width: 4.14rem;
  height: 4.8rem;
  display: block;
}
.img2 {
  height: 2.41rem;
  display: block;
}
/* 在追 */
.zaizui {
  margin-left: 0.15rem;
  width: 3.85rem;
  height: 0.58rem;
}
.zaizui1 {
  float: left;
}
.zaizui1 p span {
  display: inline-block;
  width: 0.33rem;
  height: 0.2rem;
  background-color: #fd028a;
  color: white;
  font-size: 0.11rem;
  text-align: center;
  line-height: 0.2rem;
}
.zaizui1 p i {
  margin: 0 0.13rem;
  font-size: 0.1rem;
  color: #939393;
}
.zaizui1 p b {
  font-weight: normal;
  font-size: 0.11rem;
  color: #939393;
}
.zaizui1 h4 {
  font-size: 0.2rem;
  padding-bottom: 0.05rem;
}
.zaizui2 {
  float: right;
  width: 0.64rem;
  height: 0.33rem;
  background-color: #222122;
  color: #66faff;
  text-align: center;
  line-height: 0.33rem;
  border-radius: 0.4rem;
  margin-top: 0.1rem;
}

/* 下方的喜欢 */

.xihuan {
  margin: 0.15rem 0 0.08rem;
  display: flex;
}

.xihuan li {
  text-align: center;
  width: 20%;
}
.iconfont {
  font-size: 0.25rem;
}
.xihuan li p {
  margin: 0.07rem 0;
  font-size: 0.1rem;
  color: #969696;
}
.input {
  /* margin-left: 0.15rem; */
  width: 3.8rem;
  height: 0.43rem;
  background-color: #fed98b;
  color: #693900;
  text-align: center;
  font-size: 0.12rem;
  border-radius: 0.1rem;
  border: 0;
}
.intest {
  padding-left: 0.1rem;
  box-sizing: border-box;
}
</style>